<template>
	<view v-if="desc.name" class="box" :style="theme">
		<view class="head">
			<view class="name">
				{{desc.statusName}}
			</view>
			<view v-if="desc.statusName=='待取货'">已兑换商品，请及时到店自提～</view>
			<view v-else-if="desc.statusName =='待发货'">商品正在打包发货，请耐心等待～</view>
			<view v-else-if="desc.statusName == '已自提'">商品已自提签收</view>
			<view v-else-if="desc.statusName == '已发货'">宝贝正在来的路上，请耐心等待~</view>
		</view>
		<block v-if="desc.claimType == 0 && desc.kdObj">
			<view class="addressCnt">
				<view class="address">
					<image :src="imgHost + '/ic_location@2x.png'"></image>
					<view class="desc">
						<view class="flex mb1">{{desc.kdObj.receiverName || ''}}
							<text class="f26 c6 ml20" style="font-weight: normal;">{{desc.kdObj.phone || ''}}</text>
						</view>
						<view>{{desc.kdObj.receiverAddress || ''}}</view>
					</view>
				</view>
				<view v-if="desc.kdObj.kdNo" class="flex wuliu" @click="copyText(desc.kdObj.kdNo)">
					<image :src="imgHost + '/ic_wuliu.png'" class="left" mode="widthFix"></image>
					<text class="f26 ztColor">{{desc.kdObj.kdCompany}}｜{{desc.kdObj.kdNo}}</text>
					<image :src="imgHost+'/zhuangxiangka_ic_copy.png'" class="copy" mode="widthFix"></image>
				</view>
			</view>
		</block>
		<block v-if="desc.claimType == 1 && desc.ztObj && (desc.ztObj.pickUpTime || desc.ztObj.openTimeStart)">
			<view class="addressCnt">
				<view class="address">
					<image :src="imgHost + '/ic_address@2x.png'"></image>
					<view class="desc">
						<view v-if="desc.ztObj.claimCode" class="flex mb1">取货码：<text
								class="f36">{{desc.ztObj.claimCode}}</text></view>
						<view v-else class="flex mb1">取货地址</view>
						<view>{{desc.ztObj.pickUpAddress || ''}}</view>
					</view>
				</view>
				<view v-if="desc.ztObj.pickUpTime || desc.ztObj.openTimeStart" class="yytime mt20">
					营业时间：<text v-if="!desc.ztObj.pickUpTime">{{desc.ztObj.openTimeStart || ''}} ~ {{desc.ztObj.openTimeEnd|| ''}}</text>
					<text v-else>{{desc.ztObj.pickUpTime}}</text>
				</view>
				<view v-if="desc.ztObj.memberPhone" class="yytel mt20">联系电话：<text>{{desc.ztObj.memberPhone}}</text></view>
			</view>
		</block>
		<view class="cont" :class="desc.claimType == 1 && !desc.ztObj.pickUpTime && !desc.ztObj.openTimeStart?'':'wu'">
			<view class="orderDetail">
				<view class="detail flex">
					<image v-if="desc.picture" :src="desc.picture" class="left" @click="previewImg(desc.picture)">
					</image>
					<image v-else :src="imgHost+'/default_tongyong.png'" class="left"></image>
					<view class="right">
						<view class="name flex flex_between">
							<view class="limit-1-line">{{desc.name}}</view>
						</view>
						<view class="flex flex_between">
							<text class="f24 c1">{{desc.price}}积分</text>
							<text class="c6 f26">x{{desc.num || 1}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cnt flex flex_between">
				<view>消耗积分</view>
				<view class="redColor">
					<text>{{desc.price}}</text>积分
				</view>
			</view>
		</view>
		<view class="orderCont">
			<view class="bt">订单信息</view>
			<view><text>兑换时间：</text><text>{{desc.createTime}}</text></view>
			<view v-if="desc.payTime"><text>支付时间：</text><text>{{desc.payTime}}</text></view>
			<view v-if="desc.pickupTime"><text>自提时间：</text><text>{{desc.pickupTime}}</text></view>
			<view v-if="desc.sendTime"><text>发货时间：</text><text>{{desc.sendTime}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				desc: {}
			}
		},
		onLoad(ops) {
			this.id = ops.id || ''
			let color = this.$app.ztColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: color // 导航栏背景颜色
			});
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			//单张图片预览
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = imgurl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			copyText(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: (error) => {
						console.log('失败', error);
						// uni.showToast({
						// 	title: '复制失败',
						// 	icon: 'none'
						// });
					}
				});
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.goodsOrderMemberDetail(),
					data: {
						param: {
							id: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.desc = res.recordList[0]
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}
		}

	}
</script>


<style scoped lang="scss">
	.box {
		padding-bottom: 30rpx;
	}
	.head {
		background-color: $color;
		box-sizing: border-box;
		padding: 30rpx 30rpx 150rpx;

		>view {
			font-size: 26rpx;
			line-height: 1.5;
			margin-top: 15rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			&.name {
				font-size: 36rpx;
				margin-top: 0;
				font-weight: 600;
			}
		}

		.u-count-down__text,
		.u-toolbar__wrapper__confirm {
			color: #fff !important;
		}
	}

	.cont {
		width: 690rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border-radius: 16rpx;
		margin: -120rpx 30rpx 30rpx;
		padding: 30rpx;

		&.wu {
			margin-top: 0;
		}

		.venueName {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}

		.cnt {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #333333;
			margin-top: 15rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;

				&.yh {
					font-weight: 400;
					color: #333333;
				}
			}

			&:last-of-type {
				text {
					color: $red;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
				}
			}
		}
	}

	.orderDetail {
		.detail {
			align-items: flex-start;

			.left {
				width: 88rpx;
				height: 88rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				flex: none;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						text-decoration: line-through;
						margin-left: 10rpx;
					}
				}

				.time {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					color: #999999;

					.ytk {
						width: 76rpx;
						text-align: center;
						line-height: 36rpx;
						margin-right: 15rpx;
						border-radius: 4rpx;
						border: 1rpx solid #E33950;
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #E33950;
					}
				}

				.tj {
					.price {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							text-decoration: line-through;
							margin-left: 10rpx;
						}

					}

					.num {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;

						.ytk {
							width: 76rpx;
							text-align: center;
							line-height: 36rpx;
							margin-right: 15rpx;
							border-radius: 4rpx;
							border: 1rpx solid #E33950;
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #E33950;
						}
					}
				}
			}
		}
	}

	.orderCont {
		width: 690rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border-radius: 16rpx;
		margin: 0 auto 30rpx;
		padding: 30rpx;

		view {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 1;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;

			&.bt {
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #222222;
			}

			&:last-of-type {
				margin-bottom: 0;
			}

		}
	}

	.orderFoot {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100rpx;
		background-color: #fff;
		z-index: 100;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;

		.left {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			flex: none;

			text {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: $red;
				box-sizing: border-box;
				margin-left: 5rpx;
			}
		}

		.right {
			justify-content: flex-end;

			view {
				width: 168rpx;
				border-radius: 34rpx;
				border: 1rpx solid #B2B2B2;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				text-align: center;
				line-height: 64rpx;
				margin-left: 20rpx;

				&:first-of-type {
					margin-left: 0;
				}

				&.on {
					border-color: $color;
					color: $color;
				}
			}
		}
	}

	.addressCnt {
		background: #FFF;
		margin-bottom: 20rpx;
		padding: 30rpx;
		width: 690rpx;
		margin: -120rpx auto 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;

		.address {
			display: flex;

			&.no {
				align-items: center;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				flex: none;
				margin-top: 10rpx;
				margin-right: 30rpx;
			}

			.desc {
				flex: 1;

				view {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: Medium;
					color: #111111;
					line-height: 1.5;

					&:nth-of-type(2) {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}

		}

		.yytime {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			text {
				color: #333333;
			}
		}

		.yytel {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			text {
				color: $color;
			}
		}
	}
	.wuliu {
		border-top: 1px solid #E5E5E5;
		padding-top: 20rpx;
		margin-top: 25rpx;
		.left {
			width: 30rpx;
			margin-right: 12rpx;
		}
		.copy {
			width: 20rpx;
			margin-left: 10rpx;
		}
	}
</style>